<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title> New Document </title>
  	<style>
		/*下面可以自己修改*/
    #leftNav {
      border-right: 1px grey dashed;
      width: 9.5em;
      margin-left: -2em;
    }
    
    #leftNav ul {
      list-style: none;
    }
    
    #leftNav ul ul li {
      margin-left: -1.5em;
    }	
	</style>
 </head>
  <body>
    <nav id="leftNav"><!-- leftNav.js injected nav system. --></nav>
    
    <section>
      <!-- Page content here. -->
    </section>

  <script type="text/javascript">
    function appendUl(append_to_id, ul_id) {
      var ul = document.createElement('ul');
      ul.id = ul_id;
      
      var appendTo = document.getElementById(append_to_id);
      appendTo.appendChild(ul);
    }
    function appendLiA(append_to_id, li_id, a_href, a_text) {
      var a = document.createElement('a');
      a.href = a_href;
      a.textContent = a_text;
      
      var li = document.createElement('li');
      li.id = li_id;
      li.appendChild(a);
      
      var appendTo = document.getElementById(append_to_id);
      appendTo.appendChild(li);
    }
    //通过调用以上两个函数实现
    appendUl('leftNav', 'outerUL'); 
    appendLiA('outerUL', 'home', 'home.html', 'Home');
    appendLiA('outerUL', 'portfolio', 'portfolio.html', 'Portfolio');
    appendUl('portfolio', 'portfolioUL'); 
    appendLiA('portfolioUL', 'thumbnails', 'thumbnails.html', 'Thumbnails');
    appendLiA('portfolioUL', 'slideShow', 'slideShow.html', 'Slide Show');
    appendLiA('outerUL', 'tagCloud', 'tagCloud.html', 'Tag Cloud');

  </script>
  </body>
</html>